---
title: Guide de migration
---

# Guide de migration

## Migration de RainbowKit

### 2.x.x Modifications importantes

Les dépendances [wagmi](https://wagmi.sh) et [viem](https://viem.sh) ont atteint la version `2.x.x` avec des changements significatifs.

Suivez les étapes ci-dessous pour effectuer la migration.

**1. Mettez à jour RainbowKit, `wagmi`, et `viem` à leurs dernières versions**

```bash
npm i @rainbow-me/rainbowkit@2 wagmi@2 viem@2.x
```

**2. Installez la dépendance `@tanstack/react-query`**

Avec Wagmi v2, [TanStack Query](https://tanstack.com/query/v5/docs/react/overview) est désormais une dépendance requise.

Installez-la avec la commande suivante :

```bash
npm i @tanstack/react-query
```

**3. Mettez à jour vos configurations RainbowKit et Wagmi**

```diff
  import '@rainbow-me/rainbowkit/styles.css'

+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
  import { mainnet } from 'wagmi/chains'
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'

  /* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
-   appName: 'RainbowKit demo',
-   projectId: 'YOUR_PROJECT_ID',
-   chains,
- })

  /* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])

- const { chains, publicClient } = configureChains( 
-   [mainnet, sepolia], 
-   [publicProvider(), publicProvider()],
- )

- const config = createConfig({
-   autoConnect: true,
-   publicClient,
- })

  /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+   appName: 'RainbowKit demo',
+   projectId: 'YOUR_PROJECT_ID',
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ })

+ const queryClient = new QueryClient()

  const App = () => {
    return (
-     <WagmiConfig config={config}>
+     <WagmiProvider config={config}>
+       <QueryClientProvider client={queryClient}>
-         <RainbowKitProvider chains={chains}>
+         <RainbowKitProvider>
            {/* Your App */}
          </RainbowKitProvider>
+       </QueryClientProvider>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }
```

**4. Vérifiez les changements importants dans `wagmi` et `viem`**

Si vous utilisez les hooks `wagmi` et les actions `viem` dans votre dApp, vous devrez suivre les guides de migration pour v2 :

- [Guide de migration Wagmi v2](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
- [Changements Incompatibles Viem v2](https://viem.sh/docs/migration-guide#2xx-breaking-changes)

#### Changements de RainbowKit

**1. Comportement amélioré pour les portefeuilles EIP-6963**

Les portefeuilles qui prennent en charge la nouvelle norme de connexion EIP-6963 (y compris Rainbow, MetaMask et autres) apparaîtront automatiquement dans une section `Installé` lors de l'expérience de connexion au portefeuille. Cela garantit que les utilisateurs puissent toujours trouver leurs portefeuilles préférés et se connecter aux dApps sans conflits ni boutons de secours.

Les développeurs conservent un contrôle total sur la Liste de portefeuilles personnalisés pour mettre en avant les portefeuilles préférés des utilisateurs finaux. Il est recommandé de continuer à inclure `injectedWallet` et `walletConnectWallet` dans votre liste pour prendre en charge toutes les plateformes.

**2. Configuration Wagmi avec getDefaultConfig**

Cette nouvelle API simplifie l'expérience de configuration et remplace la nécessité d'utiliser directement le `createConfig` de Wagmi. La configuration de chaîne est simplifiée, y compris les fournisseurs publics déduits pour les `transports`.

La liste de portefeuilles par défaut sera automatiquement incluse, supprimant ainsi le besoin d'utiliser `getDefaultWallets` et `connectorsForWallets`.

Vous pouvez créer une Liste de portefeuilles personnalisés en passant des connecteurs de portefeuille importés ou personnalisés à `wallets`. L'instanciation des connecteurs de portefeuille et le passage de `projectId` et `chains` ne sont plus nécessaires.

```
const config = getDefaultConfig({
  appName: 'RainbowKit demo',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet],
  wallets: [rainbowWallet], /* optional custom wallet list */
  /* Wagmi createConfig options including `transports` are also accepted */
})
```

**3. RainbowKitProvider**

Vous n'avez plus besoin de passer `chains` à `<RainbowKitProvider>`.

```diff
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
```

**4. Chaînes personnalisées**

Le type `Chain` a changé conformément à Wagmi v2, et continue de prendre en charge les métadonnées `iconUrl` et `iconBackground` de RainbowKit.

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'

  const avalanche = {
    id: 43_114,
    name: 'Avalanche',
    iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
    iconBackground: '#fff',
    nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
    rpcUrls: {
      default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
    },
    blockExplorers: {
      default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
    },
    contracts: {
      multicall3: {
        address: '0xca11bde05977b3631167028862be2a173976ca11',
        blockCreated: 11_907_934,
      },
    },
  } as const satisfies Chain
```

Exemple avec `getDefaultConfig` :

```diff
const config = getDefaultConfig({
+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overides */
+ ],
});
```

Exemple avec `createConfig` :

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })
```

**5. Portefeuilles personnalisés**

Les connecteurs de portefeuille RainbowKit ont subi des changements importants pour prendre en charge Wagmi v2. Consultez les [documents mis à jour](https://www.rainbowkit.com/docs/custom-wallets) et un [exemple de connecteur](https://github.com/rainbow-me/rainbowkit/blob/main/packages/rainbowkit/src/wallets/walletConnectors/rainbowWallet/rainbowWallet.ts) pour mettre à jour tous les connecteurs de portefeuilles personnalisés dans votre dApp.

Les connecteurs de portefeuille prennent également désormais en charge la norme EIP-6963 avec la propriété `rdns`. Assurez-vous que cela soit rempli pour éviter les duplications de références aux portefeuilles prenant en charge EIP-6963 dans votre liste de portefeuilles.

### 1.x.x Modifications importantes

#### Mis à jour à wagmi v1

La dépendance `wagmi` a été mise à jour vers `1.x.x`.

Suivez les étapes ci-dessous pour effectuer la migration.

**1. Mettez à jour RainbowKit et `wagmi` à leur dernière version**

```bash
npm i @rainbow-me/rainbowkit@^1 wagmi@^1
```

**2. Installez la dépendance `viem`**

wagmi v1 nécessite la dépendance `viem`. Installez-la avec la commande suivante :

```bash
npm i viem
```

**3. Assurez la compatibilité du bundler et du polyfill**

Référez-vous à notre échantillon de configuration Webpack pour Next.js pour des conseils de configuration pour votre projet.

Des guides de framework supplémentaires pour Vite et Remix sont disponibles [ici](https://www.rainbowkit.com/docs/installation#additional-build-tooling-setup).

**4. Vérifiez les changements importants dans `wagmi`**

Si vous utilisez les hooks `wagmi` dans votre application, vous devrez suivre le guide de migration de `wagmi` vers v1.

[Vous pouvez voir leur guide de migration ici](https://wagmi.sh/react/migration-guide).

### 0.12.x Modifications importantes

La dépendance `wagmi` a été mise à jour à `0.12.x`.

RainbowKit a adopté le connecteur `WalletConnectLegacyConnector` dans `wagmi` pour continuer à prendre en charge WalletConnect v1. La prise en charge de WalletConnect v2 et du `WalletConnectConnector` sera bientôt disponible avec un correctif, sans changements importants.

Les portefeuilles seront automatiquement transitionnés dans les futures versions.

Chaque dApp doit désormais fournir un `projectId` de [WalletConnect Cloud](https://cloud.walletconnect.com/) pour activer WalletConnect v2. Cela doit être complété avant que les serveurs de pont de WalletConnect v1 ne soient arrêtés le 28 juin 2023. RainbowKit préférera tranquillement v1 pour tous les portefeuilles si `projectId` n'est pas spécifié.

Suivez les étapes ci-dessous pour effectuer la migration.

#### 1. Mettez à jour RainbowKit et `wagmi` à leur dernière version

```bash
npm i @rainbow-me/rainbowkit@^0.12.0 wagmi@^0.12.0
```

#### 2. Fournissez un projectId WalletConnect Cloud

Chaque dApp qui repose sur WalletConnect doit maintenant obtenir un `projectId` de [WalletConnect Cloud](https://cloud.walletconnect.com/). C'est absolument gratuit et ne prend que quelques minutes.

Fournissez le `projectId` à `getDefaultWallets` et aux connecteurs de portefeuille RainbowKit individuels comme suit :

```ts
const projectId = 'YOUR_PROJECT_ID';

const { wallets } = getDefaultWallets({
  appName: 'My RainbowKit App',
  projectId,
  chains,
});

const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [
      readyWallet({ projectId, chains }),
      trustWallet({ projectId, chains }),
      ledgerWallet({ projectId, chains }),
    ],
  },
]);
```

### 0.11.x Modifications importantes

La dépendance `wagmi` a été mise à jour à `0.11.x`.

Suivez les étapes ci-dessous pour effectuer la migration.

#### 1. Mettez à jour RainbowKit et `wagmi` à leur dernière version

```bash
npm i @rainbow-me/rainbowkit@^0.11.0 wagmi@^0.11.0
```

#### 2. Vérifiez les changements importants dans `wagmi`

Si vous utilisez les hooks `wagmi` dans votre application, vous devrez vérifier si votre application a été affectée par les changements importants dans `wagmi`.

[Vous pouvez voir leur guide de migration ici](https://wagmi.sh/react/migration-guide#011x-breaking-changes).

### 0.10.x Modifications importantes

La dépendance `wagmi` a été mise à jour à `0.10.x`.

Suivez les étapes ci-dessous pour effectuer la migration.

#### 1. Mettez à jour RainbowKit et `wagmi` à leur dernière version

```bash
npm i @rainbow-me/rainbowkit@^0.10.0 wagmi@^0.10.0
```

#### 2. Vérifiez les changements importants dans `wagmi`

Si vous utilisez les hooks `wagmi` dans votre application, vous devrez vérifier si votre application a été affectée par les changements importants dans `wagmi`.

[Vous pouvez voir leur guide de migration ici](https://wagmi.sh/react/migration-guide#010x-breaking-changes).

### 0.9.x Modifications importantes

La dépendance `wagmi` a été mise à jour à `0.9.x`.

Suivez les étapes ci-dessous pour effectuer la migration.

#### 1. Mettez à jour RainbowKit et `wagmi` à leur dernière version

```bash
npm i @rainbow-me/rainbowkit@^0.9.0 wagmi@^0.9.0
```

#### 2. Vérifiez les changements importants dans `wagmi`

Si vous utilisez les hooks `wagmi` dans votre application, vous devrez vérifier si votre application a été affectée par les changements importants dans `wagmi`.

[Vous pouvez voir leur guide de migration ici](https://wagmi.sh/react/migration-guide#09x-breaking-changes).

### 0.8.x Modifications importantes

La dépendance `wagmi` a été mise à jour à `0.8.x`.

Suivez les étapes ci-dessous pour effectuer la migration.

#### 1. Mettez à jour RainbowKit et `wagmi` à leur dernière version

```bash
npm i @rainbow-me/rainbowkit@^0.8.0 wagmi@^0.8.0
```

#### 2. Vérifiez les changements importants dans `wagmi`

Si vous utilisez les hooks `wagmi` dans votre application, vous devrez vérifier si votre application a été affectée par les changements importants dans `wagmi`.

[Vous pouvez voir leur guide de migration ici](https://wagmi.sh/react/migration-guide#08x-breaking-changes).

### 0.7.x Modifications importantes

Si vous créez une liste de portefeuilles personnalisés, vous devez maintenant importer chaque portefeuille individuellement pour réduire la taille du bundle. Notez que depuis que les portefeuilles ne sont plus nommés via l'objet `wallet`, tous les portefeuilles ont maintenant un suffixe `Wallet`.

```diff
-import { connectorsForWallets, wallet } from '@rainbow-me/rainbowkit';
+import { connectorsForWallets } from '@rainbow-me/rainbowkit';
+import {
+  injectedWallet,
+  rainbowWallet,
+  metaMaskWallet,
+  coinbaseWallet,
+  walletConnectWallet,
+} from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.injected({ chains }),
-  wallet.rainbow({ chains }),
-  wallet.metaMask({ chains }),
-  wallet.coinbase({ chains, appName: 'My App' }),
-  wallet.walletConnect({ chains }),
+  injectedWallet({ chains }),
+  rainbowWallet({ chains }),
+  metaMaskWallet({ chains }),
+  coinbaseWallet({ chains, appName: 'My App' }),
+  walletConnectWallet({ chains }),
];
```

Notez également que la couche de compatibilité avec les anciens portefeuilles Steakwallet a été supprimée. Omni doit être utilisé à la place.

```diff
-import { wallet } from '@rainbow-me/rainbowkit';
+import { omniWallet } from '@rainbow-me/rainbowkit/wallets';

const wallets = [
-  wallet.steak({ chains }),
+  omniWallet({ chains }),
];
```

### 0.4.x Modifications importantes

RainbowKit a mis à jour la dépendance `wagmi` à `0.5.x`.

Suivez les étapes ci-dessous pour effectuer la migration.

#### 1. Mettez à jour les dépendances

Mettez à jour RainbowKit et wagmi à leur dernière version

```bash
npm i @rainbow-me/rainbowkit@^0.4.0 wagmi@^0.5.0
```

#### 2. Vérifiez les changements importants dans `wagmi`

Si vous utilisez les hooks `wagmi` dans votre application, vous devrez vérifier si votre application a été affectée par les changements importants dans `wagmi`.

[Vous pouvez voir leur guide de migration ici](https://wagmi.sh/react/migration-guide#05x-breaking-changes).

### 0.3.x Modifications importantes

Le paramètre `chainId` a été supprimé de `createConnector` sur le type `Wallet`.

**Notez que tous les portefeuilles intégrés utilisent la nouvelle API. La plupart des consommateurs ne seront pas affectés. Ce changement affecte uniquement les consommateurs qui ont créé/consommé [des portefeuilles personnalisés](/docs/custom-wallets).**

Si vous dériviez auparavant les URL RPC à partir du `chainId` sur `createConnector`, vous pouvez désormais supprimer cette logique car `wagmi` gère désormais les URL RPC en interne lorsqu'il est utilisé avec `configureChains`.

```diff
import { connectorsForWallets, wallet, Chain, Wallet } from '@rainbow-me/rainbowkit';
import { chain, configureChains } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';

export interface MyWalletOptions {
  chains: Chain[];
}

-const chains = [chain.mainnet]
+const { chains } = configureChains(
+  [chain.mainnet],
+  [
+    alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }),
+    publicProvider(),
+  ]
+);

export const rainbow = ({ chains }: MyWalletOptions): Wallet => ({
  ...
- createConnector: ({ chainId }) => {
+ createConnector: () => {
-   const rpc = chains.reduce(
-     (rpcUrlMap, chain) => ({
-       ...rpcUrlMap,
-       [chainId]: chain.rpcUrls.default,
-     }),
-     {}
-   );
    const connector = new WalletConnectConnector({
      chains,
      options: {
        qrcode: false,
-       rpc,
      },
    });
  }
  ...
}

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      rainbow({ chains }),
    ],
  },
]);
```

### 0.2.x Modifications importantes

RainbowKit a mis à jour la dépendance `wagmi` à `^0.4`.

Suivez les étapes ci-dessous pour effectuer la migration.

#### 1. Mettez à jour les dépendances

Mettez à jour RainbowKit et wagmi à leur dernière version

```bash
npm i @rainbow-me/rainbowkit@^0.2.0 wagmi@^0.4.2
```

#### 2. Remplacez l'importation de configureChains

Importez `configureChains` de wagmi au lieu de RainbowKit :

```diff
- import { configureChains } from '@rainbow-me/rainbowkit';
+ import { configureChains } from 'wagmi';
```

#### 3. Migrez les fournisseurs

RainbowKit n'exporte plus de `apiProvider` API. Remplacez-le par votre fournisseur souhaité de wagmi.

```diff
- import { apiProvider } from '@rainbow-me/rainbowkit';
```

#### Alchemy

Importez `alchemyProvider` de `wagmi/providers/alchemy`.

```diff
+ import { alchemyProvider } from 'wagmi/providers/alchemy';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.alchemy(process.env.ALCHEMY_ID)]
+ [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID })]
);
```

#### Infura

Importez `infuraProvider` de `wagmi/providers/infura`.

```diff
+import { infuraProvider } from 'wagmi/providers/infura';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.infura(process.env.INFURA_ID)]
+ [infuraProvider({ infuraId: process.env.INFURA_ID })]
);
```

#### JSON RPC

Importez `jsonRpcProvider` de `wagmi/providers/jsonRpc`.

```diff
+ import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
  [
-   apiProvider.jsonRpc(chain => ({
-     rpcUrl: `https://${chain.id}.example.com`,
-   })),
+   jsonRpcProvider({
+     rpc: chain => ({
+       http: `https://${chain.id}.example.com`,
+     }),
+   }),
  ]
);
```

#### Fournisseur public

Importez `publicProvider` de `wagmi/providers/public`.

```diff
+ import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);
```

#### 4. Renommez le fournisseur de wagmi

Renommez `WagmiProvider` en `WagmiConfig`.

```diff
import {
- WagmiProvider
+ WagmiConfig
} from 'wagmi'

const App = () => {
  return (
-   <WagmiProvider client={wagmiClient}>...</WagmiProvider>
+   <WagmiConfig client={wagmiClient}>...</WagmiConfig>
  );
};
```

Et voilà ! 🌈
